<template>
  <router-view></router-view>
  <van-player :mini-style="miniStyle"></van-player>
</template>

<script lang="ts" setup>
import { computed, reactive, watch } from 'vue';
import { useMyRouters } from '@/router';
import { useMyStores } from '@/store';
// 全局播放器
import VanPlayer from '@/components/player/index.vue';
// config
import { tabBars } from '@/config/app.config';

const { route } = useMyRouters();
const { appStore, playerStore, fullPlayer } = useMyStores();

let miniStyle = reactive<any>({
  position: 'fixed',
  left: 0,
  bottom: '50px'
});

// 监听路由题变化
const pagePath = computed(() => route.path);
watch(pagePath, newVal => {
  const index = tabBars.findIndex(item => item.to == newVal);
  if (index == -1) {
    appStore.SET_TAB_BAR(false);
    miniStyle.bottom = 0;
  } else {
    appStore.SET_TAB_BAR(true);
    miniStyle.bottom = '50px';
  }
  if (fullPlayer.value) {
    playerStore.SET_MINI_PLAYER(true)
    playerStore.SET_FULL_PLAYER(false)
  }
});
</script>

<style lang="less">
.page {
  padding: 12px;
}
.loading {
  margin-top: 60px;
}
.van-action-sheet__content {
  min-height: 400px;
}
.section::after {
  content: '';
  display: block;
  width: 100%;
  height: 120px;
}
</style>
